<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import echarts from "echarts";
import resize from "../../dashboard/mixins/resize";
import 'echarts-liquidfill';
var colorTypeArr = [
  {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [
      {
        offset: 0,
        color: 'rgba(185, 150, 248, 0.3)'
      },
      {
        offset: 1,
        color: 'rgba(185, 150, 248, 0.8)'
      }
    ]
  },
  {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [
      {
        offset: 0,
        color: 'rgba(33, 229, 33, 0.3)'
      },
      {
        offset: 1,
        color: 'rgba(33, 229, 33, 0.8)'
      }
    ]
  },
  {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [
      {
        offset: 0,
        color: 'rgba(3, 194, 236, 0.3)'
      },
      {
        offset: 1,
        color: 'rgba(3, 194, 236, 0.8)'
      }
    ]
  },
  {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [
      {
        offset: 0,
        color: 'rgba(218, 57, 20, 0.3)'
      },
      {
        offset: 1,
        color: 'rgba(218, 57, 20, 0.8)'
      }
    ]
  },
  {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [
      {
        offset: 0,
        color: 'rgba(232, 190, 49, 0.3)'
      },
      {
        offset: 1,
        color: 'rgba(232, 190, 49, 0.8)'
      }
    ]
  }
];
export default {
  name: 'liquidfill',
  mixins: [resize],
  props: {
    colorNumber: {
      type: Number,
      default: 1,
    },
    className: {
      type: String,
      default: "chart-dom",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
    valueData: {
      type: Number,
      required: true,
    },
    unit: {
      type: String,
      default: "%",
    },
    type: {
      type: String,
      default: "",
    },
    autoResize: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el);
      this.setOptions(this.valueData);
    },
    setOptions(data) {
      this.chart.setOption({
        title: [{
          top: '27%',
          left: 'center',
          text: this.type,
          textStyle: {
            color: colorTypeArr[this.colorNumber].colorStops[1].color,
            fontSize: this.fontSize(18),
          }
        },{
          text: '{a|' + data  + '}{c|' + this.unit + '}',
          top: '45%',
          left: 'center',
          textStyle: {
            rich: {
              a: {
                fontSize: this.fontSize(16),
                color: '#ffffff'
              },
              c: {
                fontSize: this.fontSize(14),
                color: '#ffffff',
                fontWeight: 'normal'
              }
            }
          }
        }],
        series: [{
          type: 'liquidFill',
          radius: '85%',
          center: ['50%', '50%'],
          data: [0.4], // data个数代表波浪数
          color: [colorTypeArr[this.colorNumber].colorStops[1].color],
          outline: { // 轮廓设置
            show: true,
            borderDistance: this.fontSize(7), // 边框与球中间间距
            itemStyle: {
              borderWidth: this.fontSize(3),
              borderColor: colorTypeArr[this.colorNumber].colorStops[1].color,
              shadowBlur: this.fontSize(10),
              shadowColor: '#fff'
            }
          },
          backgroundStyle: {
            shadowColor: 'rgba(0, 0, 0, 0)',
            opacity: 0,
          },

          label: {
            show: false,
            textStyle: {
              color: '#fff',
              fontSize: this.fontSize(20)
            }
          }
        }]
      });
    },
    fontSize(fontsize) {
      let clientWidth = Math.max(document.documentElement.clientWidth, 1366);
      return (clientWidth * fontsize) / 1920;
    },
  },
  watch: {
    valueData: {
      handler(val, old) {
        if (this.valueData) {
          this.$nextTick(() => {
            this.initChart();
          });
        }
      },
      immediate: true,
      deep: true,
    },
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
}
</script>

<style></style>